<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>base_full</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">base</a-divider><!-- =============================================================== -->
	<p class="desc">desc</p>
	<a-button type="primary" @click="hello('8866')">点击4</a-button>
	<!-- <button @click="hello('8866')">点击4</button> -->
	<p>{{ message }}</p>
	<p v-html="getNum(7)"></p>
	
	
	
	
	
	
	
	<a-divider class="a-divi" orientation="left">API#</a-divider><!-- =============================================================== -->
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		console.log("仅在整个视图都被渲染之后才会运行的代码");
		// this.$refs.myParRef.focus();		//让myParRef组件自动获取焦点，但没生效
		
	});
	// console.log("实例挂载完成后被调用2");
},
computed:{
	getNum(){
		return function(num){
			return num * 10;
		}
	},
	retStr(){
		return function(val){
			return 'val:' + val;
		};
	},
	
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
},
watch:{
	message:function(value){
		console.log('message 的值为：' +value);
	},
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
